<template>
	<b-layout-index>
		<navbar bgcolor="#fff" :title="$t('订单中心')"></navbar>
		<view class="page-container font-size-12">

			<!-- 订单状态选项卡 -->
			<scroll-view class="tab-scroll" scroll-x>
				<view class="tab-container">
					<view v-for="(tab, index) in tabs" :key="index" class="font-size-12"
						:class="['tab-item', { active: currentTab === tab.status }]" @tap="handleTabChange(tab.status)">
						<text>{{ $t(tab.name) }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 订单列表 -->
			<scroll-view class="order-list" scroll-y @scrolltolower="loadMore" @refresherrefresh="onRefresh"
				refresher-enabled :refresher-triggered="isRefreshing">
				<view v-if="orderList.length > 0">
					<view v-for="(item, index) in orderList" :key="index" class="order-card">
						<view class="order-header font-size-12">
							<text class="order-number font-size-12">{{$t('订单号')}}：{{ item.order.sn }}</text>
							<text
								:class="['order-status', `status-${item.order.status}`]">{{ $t(stateList[item.order.status])}}</text>
						</view>
						<view>
							<view class="order-content" v-for="(itema,indexa) in item.details">
								<image class="goods-image" :src="itema.image" mode="aspectFill" />
								<view class="goods-info">
									<text class="goods-name">{{ itema.goodsName }}</text>
									<!-- 			<text class="goods-spec">{{ order.specification }}</text> -->
									<view class="goods-price-count font-size-12">
										<text class="goods-count">x{{ itema.quantity }}</text>
									</view>
								</view>
							</view>
						</view>

						<view class="order-footer">

							<view class="action-buttons">


								<button @click="itemShow(item.order)" size="mini">{{$t("查看物流")}}</button>
								<button v-if="item.order.status ===2" size="mini"
									:style="{backgroundColor:color.primary}" type="primary">{{$t("确认收货")}}</button>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-else class="empty-state" v-if="!loading && orderList.length==0">
					<image class="empty-image" :src="emptyImageUrl" mode="aspectFit" />
					<text class="empty-text">{{$t("暂无订单记录")}}</text>
					<uni-button class="shop-button" type="primary" size="mini">{{$t("去逛逛")}}</uni-button>
				</view>

				<!-- 加载状态 -->
				<loading v-if="loading" />
				<!-- 	<view v-if="loading" class="loading">
					<uni-icons type="spinner-cycle" size="20" />
					<text class="loading-text">{{$t("加载中")}}...</text>
				</view> -->
			</scroll-view>
		</view>

	</b-layout-index>
</template>

<script>
	import {
		findByCloudOrderMyList,
		orderRePayment
	} from "@/api/order.js";
	var tabs = ['全部', '待付款', '待发货', '待收货', '已完成'];



	var emptyImageUrl = 'https://ai-public.mastergo.com/ai/img_res/2660e0a8773b799e4fdca256285fcdaa.jpg';



	export default {
		data() {
			return {
				orderList: [],
				currentTab: -1,
				//tabs,
				loading: false,
				emptyImageUrl,
				isRefreshing: false,
				stateList: {
					//0: "待付款",
					0: "发货中",
					2: "配送中",
					3: "未付款",
					4: "完成"
				},
				tabs: [{
						icon: 'icon-qianbao',
						name: "全部",
						status: -1
					},
					{
						icon: 'icon-chazhao',
						name: "发货中",
						status: 0
					},
					{
						icon: 'icon-tuisong',
						name: "配送中",
						status: 2
					},
					{
						icon: 'icon-tuisong',
						name: "完成",
						status: 4
					},
					{
						icon: 'icon-shangcheng',
						name: "未付款",
						status: 3
					}
				],
			}
		},
		onLoad() {
			this.getData(-1)
		},
		methods: {
			handleTabChange(index) {
				this.currentTab = index;
				this.getData(index)
			},

			loadMore() {
				var loading = this.loading;
				if (loading) return;
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
				}, 1000);
			},

			onRefresh() {
				this.isRefreshing = true;
				setTimeout(() => {
					this.isRefreshing = false;
				}, 1000);
			},
			getData: function(index = 0) {
				this.loading = true

				uni.showLoading()
				var the = this;
				the.orderList = []
				findByCloudOrderMyList(index).then(res => {

					console.log(res)
					the.orderList = res;
					uni.hideLoading()
					the.loading = false
				}).catch(e => {
					the.orderList = []
					uni.hideLoading()
					the.loading = false
				})
			},
			itemShow: function(item) {
				console.log(item)
				uni.navigateTo({
					url: "./show?id=" + item.id
				})
			},
			rePayment: function(id = 0) {
				var the = this;
				orderRePayment(id).then(res => {
					the.sendPay(res)
				}).catch(e => {
					uni.showToast({
						title: the.$t("支付失败")
					})
				})

			},
			sendPay: function(res) {
				var the = this;
				uni.requestPayment({
					provider: 'wxpay',
					appId: res.appId,
					nonceStr: res.nonceStr,
					package: res.packageValue,
					paySign: res.paySign,
					signType: res.signType,
					timeStamp: res.timeStamp,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						var a = refreshLogin()
						a.then(res => {
							uni.showToast({
								title: the.$t("支付成功")
							})
							uni.removeStorageSync("newUser")
							uni.setStorageSync("userInfo", res)
							uni.setStorageSync("Authorization", res.token)
							uni.reLaunch({
								url: "/pages/index/index"
							})
						})
					},
					fail: function(err) {
						uni.showToast({
							title: the.$t("支付失败")
						})
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>

<style>
	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.nav-header {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #ffffff;
		padding: 0 30rpx;
		flex-shrink: 0;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}



	.filter-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.tab-scroll {
		background-color: #ffffff;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.tab-container {
		display: flex;
		padding: 0 20rpx;
		height: 88rpx;
	}

	.tab-item {
		padding: 0 15rpx;
		display: flex;
		align-items: center;
		color: #666666;
		position: relative;
	}

	.tab-item.active {
		color: #2979ff;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		height: 4rpx;
		background-color: #2979ff;
		border-radius: 2rpx;
	}

	.order-list {
		flex: 1;
		overflow: auto;
		padding: 10rpx;
	}

	.order-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.order-number {

		color: #666666;
	}

	.order-status {}

	.status-0 {
		color: #ff9800;
	}

	.status-shipped {
		color: #2979ff;
	}

	.order-content {
		display: flex;
		margin-bottom: 20rpx;
	}

	.goods-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-indent: 10px;
	}

	.goods-name {

		color: #333333;
		margin-bottom: 10rpx;
	}

	.goods-spec {

		color: #999999;
		margin-bottom: 10rpx;
	}

	.goods-price-count {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-price {

		color: #ff5722;
	}

	.goods-count {

		color: #999999;
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1px solid #f5f5f5;
	}

	.total-amount {

		color: #666666;
	}

	.amount {

		color: #ff5722;
		font-weight: 500;
	}

	.action-buttons {
		display: flex;
		gap: 5rpx;
	}

	.action-buttons button {
		font-size: 12px !important;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 200rpx;
	}

	.empty-image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 40rpx;
	}

	.empty-text {
		font-size: 14px;
		color: #999999;
		margin-bottom: 40rpx;
	}

	.shop-button {
		width: 200rpx;
	}

	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.loading-text {
		font-size: 14px;
		color: #999999;
		margin-left: 10rpx;
	}
</style>